<template>
  <Card>
    <Row>
      <Col span="3" style="font-size: 20px">角色查询</Col>
      <Col span="4">
        <Input type="text" placeholder="请输入角色名或描述" v-model="fuzzyKey">
        <span slot="prepend">
            <Icon type="ios-contact" slot="prefix"/>
          </span>
        </Input>
      </Col>
      <Col span="2" offset="14"><Button type="primary" @click="searchRole">查询</Button></Col>
      <Col span="1"><Button icon="ios-add-circle-outline" @click="value = true"></Button></Col>
      <Drawer title="新建角色" v-model="value" width="260" :mask-closable="false" :styles="styles">
        <Form :model="formData":rules="rules" @keydown.enter.native="submit">
          <FormItem prop="roleName">
            <Input v-model="formData.roleName" placeholder="请输入角色名" >
            <span slot="prepend">
                <Icon type="ios-contact" slot="prefix"/>
              </span>
            </Input>
          </FormItem>
          <FormItem prop="roleDes">
            <Input type="textarea" :rows="4" v-model="formData.roleDes" placeholder="请输入角色描述"/>
          </FormItem>
        </Form>
        <div class="demo-drawer-footer">
          <Button @click="value3 = false">取消</Button>
          <Button type="primary" @click="submit">提交</Button>
        </div>
      </Drawer>
    </Row>
  </Card>
</template>

<script>
  import {url} from '../../../config/url'
  export default {
    name: "role-search",
    props: {
      roleNameRules: {
        type: Array,
        default: () => {
          return [
            { required: true, message: '角色名不能为空', trigger: 'blur' }
          ]
        }
      },
      roleDesRules:{
        type: Array,
        default: () => {
          return [
            { required: true, message: '角色描述不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    data(){
      return{
        fuzzyKey:'',
        value: false,
        roleList:[],
        styles: {
          height: 'calc(100% - 55px)',
          overflow: 'auto',
          paddingBottom: '53px',
          position: 'static'
        },
        formData: {
          roleName: '',
          roleDes:'',
        },
      }
    },
    computed:{
      rules(){
        return{
          roleName:this.roleNameRules,
          roleDes:this.roleDesRules,
        }
      }
    },
    methods:{
      //提交需要新建角色的信息
      submit(){
        if(this.formData.roleName.length>0&&this.formData.roleDes.length>0){
          this.$axios.post(url+'/role',{
            'name':this.formData.roleName,
            'description':this.formData.roleDes
          },{
            headers:{
              'Content-Type':'application/json'
            }
          }).then(res=>{
            if(res.data.error_code==0){
              alert("新建角色成功");
              this.formData.roleName='';
              this.formData.roleDes='';
              this.value=false
            }else{
              alert("新建角色失败："+res.data.error_msg)
            }
          })
        }else {
          alert("角色信息不能为空，新建角色失败")
        }
      },
      //发送需要查询角色的条件
      searchRole(){
        this.roleList=[];
        let query=JSON.stringify({
          'name':this.fuzzyKey,
          'description':this.fuzzyKey,
          'page_size':8,
          'fuzzy_key':['name','description'],
          'or_key':['name','description']
        });
        this.$axios.get(url+'/role',{
          params:{
            'data':query
          }
        }).then(res=>{
          if(res.data.error_code==0){
            let size=res.data.data.records.length;
            let records=res.data.data.records;
            for(let i=0;i<size;i++){
              let record={
                id:records[i].id,
                name:records[i].name,
                description:records[i].description
              };
              this.roleList.push(record)
            }
            this.$emit('roleList',this.roleList)
          }else{
            alert("查询失败"+this.data.error_msg)
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
